<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dijit.form.ComboBox Unit Test</title>

	<style>
		@import "../../../dojo/resources/dojo.css";
		@import "../../../util/doh/robot/robot.css";
		@import "../css/dijitTests.css";
	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="isDebug: true, parseOnLoad: false"></script>

	<!-- only needed for alternate theme testing: -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		var testWidget = "dijit.form.ComboBox";
		var qstr = window.location.search.substr(1);
		if(qstr.length){
		        var qparts = qstr.split("&");
		        for(var x=0; x<qparts.length; x++){
		                var tp = qparts[x].split("=");
		                if(tp[0] == "testWidget"){
		                        testWidget = tp[1];
					document.title = testWidget + " Unit Test";
		                }
		        }
		}
		dojo.require("dojo.data.ItemFileReadStore");
		dojo.require("dijit.tests._data.SlowStore");
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require(testWidget);
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		function setVal2(val){
			dojo.byId('value2').value=val;
			var w = dijit.byId('datatest');
			var item = w.item;
			console.debug("Value changed to ["+val+"] in second box (#1652): datastore item label = " + (item?w.store.getLabel(item):'no item'));
		}
		function setVal3(val){
			dojo.byId('value3').value=val;
		}
		function setVal4(val){
			dojo.byId('value4').value=val;
		}
		var combo;
		function myLabelFunc(item, store){
			var label=store.getValue(item, 'name');
			// DEMO: uncomment to chop off a character
			//label=label.substr(0, label.length-1);
			// DEMO: uncomment to set to lower case
			label = label.toLowerCase();
			return label;
		}

		function init(){
			var testClass = dojo.getObject(testWidget);
			// substitute testWidget for each dojoType=$testWidget
			dojo.query('[dojoType="$testWidget"]').forEach(function(node){
				node.setAttribute('dojoType', testWidget);
			});
			// substitute value=$-id-val by locating <select id="id"><option value="val">val</option></select>
			dojo.query('*[value|="$"]').forEach(function(node){
				var attrs = node.getAttribute('value').split("-");
				var id = attrs[1];
				var val = attrs[2];
				if(testWidget == "dijit.form.ComboBox"){
					val = dojo.query("> option[value='"+val+"']", id)[0].innerHTML;
				}
				node.setAttribute('value', val);
			});
			dojo.parser.parse(dojo.body());
			store = new dojo.data.ItemFileReadStore({url: dojo.moduleUrl("dijit.tests._data", "states.json")});
			combo = new testClass({
				name:"prog",
				title: "title attribute used for label",
				autoComplete:false,
				store: store,
				searchAttr:"name"
			}, dojo.byId("progCombo"));
			store2 = new dojo.data.ItemFileReadStore({url: dojo.moduleUrl("dijit.tests._data", "countries.json")});
			combo = new testClass({
				name:"prog2",
				autoComplete:false,
				store:store2,
				query:{type:'country'},
				searchAttr:"name"
			}, dojo.byId("progCombo2"));

			new testClass({
				name:"prog3",
				autoComplete:false,
				store:store2,
				query:{type:'country'},
				searchAttr:"name",
				fetchProperties: {sort:[{attribute: 'name', descending: true}]}
			}, dojo.byId("progCombo3"));
		}
		dojo.addOnLoad(init);

		function toggleDisabled(button, widget){
			widget = dijit.byId(widget);
			button = dojo.byId(button);
			widget.attr('disabled',!widget.disabled);
			button.innerHTML= widget.disabled ? "Enable" : "Disable";
		}
	</script>
</head>

<body class="tundra">

	<h1 class="testTitle" id="title"></h1>
	<script>dojo.byId('title').appendChild(document.createTextNode(testWidget+" Unit Test"))</script>
	<form id="form1" action="#" method="GET">

		<p>Option tags, autoComplete=false, selectOnClick=true, default value of California, pageSize=30, custom labelFunc method</p>
		<label for="setvaluetest">US State test 1</label> (200% Courier font):
		<select id="setvaluetest"
				name="state1"
				dojoType="$testWidget"
				style="width:50%;font-size:200%;font-family:Courier;"
				autoComplete="false"
				selectOnClick="true"
				onBlur="dojo.byId('b1').value=dijit.byId('setvaluetest').value"
				pageSize="30"
		>
			<script type="dojo/method" event="onChange">
				if(this.lastlabelFuncMsg){
					console.info(this.lastlabelFuncMsg);
					this.lastlabelFuncMsg = '';
				}
				var newValue = arguments[0];
				dojo.byId('oc1').value = newValue;
				var itemLabel;
				if(this.item === null){
					itemLabel = "null";
					if(testWidget != "dijit.form.ComboBox" && this.isValid() && this.textbox.value != ''){
						console.error(this.id + ' has a null item, onChange value = ' + newValue + ', widget value = ' + this.value + ', displayed Value = ' + this.textbox.value);
						this.itemError = true;
					}
				}else if(typeof this.item === "undefined"){
					itemLabel = "undefined";
					console.error(this.id + ' has an undefined item, onChange value = ' + newValue + ', widget value = ' + this.value + ', displayed Value = ' + this.textbox.value);
					this.itemError = true;
				}else{
					itemLabel = this.labelFunc(this.item, this.store);
					if(this.textbox.value != itemLabel){
						console.error(this.id + ' has an inconsistent item value, item label = ' + itemLabel + ', onChange value = ' + newValue + ', widget value = ' + this.value + ', displayed Value = ' + this.textbox.value);
						this.itemError = true;
					}
				}
				dojo.byId('i1').value = itemLabel;
			</script>
			<script type="dojo/method" event="labelFunc">
				var item = arguments[0];
				var store = arguments[1];
				var label = store.getValue(item, this.searchAttr);
				var value = store.getValue(item, 'value');
				if(!this.labelFuncCount){ this.labelFuncCount = 0; }
				if(!this.labelFuncCounts){ this.labelFuncCounts = []; }
				if(!this.labelFuncCounts[value]){ this.labelFuncCounts[value] = 0; }
				this.labelFuncCount++;
				this.labelFuncCounts[value]++;
				this.lastlabelFuncMsg = 'my labelfunc ' + label + ' (' + value + '), count = ' + this.labelFuncCounts[value];
				return label + ' (' + value + ')';
			</script>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AS">American Samoa</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="AE">Armed Forces Europe</option>
			<option value="AP">Armed Forces Pacific</option>
			<option value="AA">Armed Forces the Americas</option>
			<option value="CA" selected>California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FM">Federated States of Micronesia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="GU">Guam</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MH">Marshall Islands</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="MP">Northern Mariana Islands</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="PR">Puerto Rico</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VI">Virgin Islands, U.S.</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>
		<br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
		<br>value:<input id="v1" disabled value="not fired yet!" autocomplete="off">
		<br>blur:<input id="b1" disabled value="not fired yet!" autocomplete="off">
		<br>this.item:<input id="i1" disabled value="no onChange yet!" autocomplete="off">
		<input type="button" id="sv1_1" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').attr('displayedValue', 'Kentucky')" tabIndex="-1">
	        <input type="button" id="sv1_2" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').attr('displayedValue', 'Canada')" tabIndex="-1">
	        <input type="button" id="sv1_3" value="Set value to null" onClick="dijit.byId('setvaluetest').attr('value', null)" tabIndex="-1">
	        <input type="button" id="sv1_4" value="Get value" onClick="dojo.byId('v1').value=dijit.byId('setvaluetest').attr('value')" tabIndex="-1">

		<hr>

		<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
			url="../_data/states.json"></div>
		<div dojoType="dijit.tests._data.SlowStore" jsId="slowStateStore"
			url="../_data/states.json"></div>

		<div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore"
			url="../_data/dijits.json"></div>

		<p>Data store, autoComplete=true:</p>
		<label for="datatest">US State test 2</label> (8pt font):
		<input dojoType="$testWidget"
				value="$-setvaluetest-CA"
				store="stateStore"
				searchAttr="name"
				style="width: 200px; font-size: 8pt;"
				name="state2"
				onChange="setVal2"
				id="datatest"
		>
		<br>onChange:<input id="value2" disabled value="not fired yet!" autocomplete="off">
		<hr>
		<p>Artificially slowed-down data store, autoComplete=true:</p>
		<label for="slow">US State test slow</label>:
		<input dojoType="$testWidget"
				value="$-setvaluetest-CA"
				store="slowStateStore"
				searchAttr="name"
				name="stateSlow"
				onChange="dojo.byId('ocSlow').value=arguments[0]"
				id="slow"
		>
		<br>onChange:<input id="ocSlow" disabled value="not fired yet!" autocomplete="off">
		<button id="slowDestroy" tabIndex="-1" onclick="dijit.byId('slow').destroy();return false">Destroy widget to test in-flight query cancel</button>
		<hr>

		<label for="datatestDijit">Dijit List test #1</label> (150% font):
		<input dojoType="$testWidget"
				value="dijit.Editor"
				store="dijitStore"
				searchAttr="className"
				style="width: 200px; font-size: 150%;"
				name="dijitList1"
				id="datatestDijit"
		>
		<span>Hey look, this one is kind of useful.</span>
		<hr>

		<p>Initially disabled, url, autoComplete=false:</p>
		<label for="combo3">US State test 3: </label>
	 	<input id="combo3"
	 			dojoType="$testWidget"
	 			value="$-setvaluetest-CA"
				store="stateStore"
				searchAttr="name"
				style="width: 300px;"
				name="state3"
				autoComplete="false"
				onChange="setVal3"
				disabled
		>
		<br>onChange:<input id="value3" disabled value="not fired yet!" autocomplete="off">
		<div>
			<button id="combo3_disable" onclick='toggleDisabled("combo3_disable", "combo3"); return false;'>Enable</button>
		</div>
		<hr>
		<p>Data store, autoComplete=false required=true and highlightMatch="none"</p>
		<label for="combobox4">US State test 4: </label>
		<input dojoType="$testWidget"
				value=""
				store="stateStore"
				searchAttr="name"
				style="width: 300px;"
				name="state4"
				onChange="setVal4"
				autoComplete="false"
				id="combobox4"
				required="true"
				highlightMatch="none"
		>
		<br>onChange:<input id="value4" disabled value="not fired yet!" autocomplete="off">
		<hr>
		<p>test that title used as label is preserved on input</p>
		<select id="preservetitletest"
				name="titletest"
				dojoType="$testWidget"
				style="width:50%;font-family:Courier;"
				autoComplete="false"
				selectOnClick="true"
				title="New England States"
		>
			<option value="ct">Connecticut</option>
			<option value="me">Maine</option>
			<option value="ma">Massachusetts</option>
			<option value="nh">New Hampshire</option>
			<option value="vt">Vermont</option>
		</select>
		<hr>
		<p>No arrow, data store which searches and highlights matches anywhere in the string</p>
	 	<input dojoType="$testWidget"
				id="arrowless"
	 			value="$-setvaluetest-CA"
				store="stateStore"
				searchAttr="name"
				queryExpr="*${0}*"
				name="state5"
				autoComplete="false"
				hasDownArrow="false"
				highlightMatch="all"
		>
		<hr>
		<p>Created programmatically</p>
		<input id="progCombo">
		<hr>
		<p>Created programmatically with an initial query.  (Limits list to items with type = country.)</p>
		<input id="progCombo2">
		<hr>
		<p>Created programmatically with an ItemFileReadStore and a descending sort.  (Limits list to items with type = country.)</p>
		<input id="progCombo3">
		<hr>
		<p>With option tags, autoComplete=true, pageSize=30, and a descending sort.</p>
		<select
				name="descending"
				id="descending"
				dojoType="$testWidget"
				style="width:50%;font-size:200%;font-family:Courier;"
				autoComplete="true"
				onChange="dojo.byId('oc1').value=arguments[0]"
				pageSize="30"
				fetchProperties="{sort:[{attribute: 'name', descending: true}]}"
		>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			<option value="AS">American Samoa</option>
			<option value="AZ">Arizona</option>
			<option value="AR">Arkansas</option>
			<option value="AE">Armed Forces Europe</option>
			<option value="AP">Armed Forces Pacific</option>
			<option value="AA">Armed Forces the Americas</option>
			<option value="CA" selected>California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="DC">District of Columbia</option>
			<option value="FM">Federated States of Micronesia</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="GU">Guam</option>
			<option value="HI">Hawaii</option>
			<option value="ID">Idaho</option>
			<option value="IL">Illinois</option>
			<option value="IN">Indiana</option>
			<option value="IA">Iowa</option>
			<option value="KS">Kansas</option>
			<option value="KY">Kentucky</option>
			<option value="LA">Louisiana</option>
			<option value="ME">Maine</option>
			<option value="MH">Marshall Islands</option>
			<option value="MD">Maryland</option>
			<option value="MA">Massachusetts</option>
			<option value="MI">Michigan</option>
			<option value="MN">Minnesota</option>
			<option value="MS">Mississippi</option>
			<option value="MO">Missouri</option>
			<option value="MT">Montana</option>
			<option value="NE">Nebraska</option>
			<option value="NV">Nevada</option>
			<option value="NH">New Hampshire</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
			<option value="MP">Northern Mariana Islands</option>
			<option value="OH">Ohio</option>
			<option value="OK">Oklahoma</option>
			<option value="OR">Oregon</option>
			<option value="PA">Pennsylvania</option>
			<option value="PR">Puerto Rico</option>
			<option value="RI">Rhode Island</option>
			<option value="SC">South Carolina</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
			<option value="UT">Utah</option>
			<option value="VT">Vermont</option>
			<option value="VI">Virgin Islands, U.S.</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="WV">West Virginia</option>
			<option value="WI">Wisconsin</option>
			<option value="WY">Wyoming</option>
		</select>
		<hr>
		<p>Special characters</p>
		<p>The drop down list should be:</p>
		<ul>
		   <li>sticks &amp; stones</li>
		   <li>rags --&gt; riches</li>
		   <li>more\less</li>
		   <li>3 * 5</li>
		</ul>
		<label for="specialchars">Special chars:</label>
		<select dojoType="$testWidget"
			name="specialchars"
			id="specialchars"
		>
			<option value="sticks" selected>sticks &amp; stones</option>
			<option value="rags">rags --&gt; riches</option>
			<option value="more">more\less</option>
			<option value="times">3 * 5</option>
		</select>
		<hr>
		<p>Japanese</p>
		<p>Try typing &#x6771;&#x533A; (East), &#x897F;&#x533A; (West), &#x5317;&#x533A; (North), &#x5357;&#x533A; (South) and a few choices will pop up.</p>
		<label for="japanese">Japanese list:</label>
		<select name="japanese" id="japanese" dojoType="$testWidget" style="width: 300px;" autoComplete="true">
			<option value="nanboku">&#x5357;&#x5317; (Nanboku)</option>
			<option value="touzai">&#x6771;&#x897F; (Touzai)</option>
			<option value="toukyou">&#x6771;&#x4EAC; (Tokyo)</option>
			<option value="higashiku">&#x6771;&#x533A; (East)</option>
			<option value="nishiku">&#x897F;&#x533A; (West)</option>
			<option value="minamiku">&#x5357;&#x533A; (South)</option>
			<option value="kitaku">&#x5317;&#x533A; (North)</option>
		</select>
		<hr>
		<p>Custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true, prompt message when field is blank:</p>
		<label for="labelFunc">custom label function</label>
		<input
				id="labelFunc"
				dojoType="$testWidget"
				value="$-setvaluetest-OR"
				labelFunc="myLabelFunc"
				store="stateStore"
				name="labelFunc"
				autoComplete="true"
				labelAttr="label"
				labelType="html"
				promptMessage="Please enter a state"
				invalidMessage="Invalid state name."
		>
		<input type="button" onclick="dijit.byId('labelFunc').attr('readOnly',false);" value="Remove readOnly">
		<input type="button" onclick="dijit.byId('labelFunc').attr('readOnly',true);" value="Set readOnly">
		<input type="button" onclick="dijit.byId('labelFunc').attr('disabled',false);" value="Remove disabled">
		<input type="button" onclick="dijit.byId('labelFunc').attr('disabled',true);" value="Set disabled">
		<hr>
		<input type="button" value="Create one in a window" onclick="var win=window.open(window.location);">
		<input type="submit">
		<script>
			// so robot can get to it easily
			document.displayData=function() {
				var f = document.getElementById("form1");
				var s = "";
				for (var i = 0; i < f.elements.length; i++) {
					var elem = f.elements[i];
					if (elem.nodeName.toLowerCase() == "button" || elem.type=="submit" || elem.type=="button")  { continue; }
					s += elem.name + ": " + elem.value + "\n";
				}
				return s;
			}
		</script>
		<button name="button" onclick="alert(document.displayData()); return false;">view data</button>

	</form>
	<p>
	This is some text below the boxes. It shouldn't get pushed out of the way when search results get returned.
	A native select tag to test IE bleed through problem:
	</p>

	<select>
	  <option>test for</option>
	  <option>IE bleed through</option>
	  <option>problem</option>
	</select>

	<div id="debugbox"></div>
	<!-- maintain state of combo box if user presses back/forward button -->
	<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
</body>
</html>
